<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="6">
        <el-button size="mini" @click="openData"> 刷新 </el-button>
      </el-col>
      <el-col :span="18">
        <el-form :inline="true" :model="FIndexObject">
          <el-form-item label="表名称">
            <el-input
              v-model="FIndexObject.FObjectName"
              ReadOnlyColor
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="表类型">
            <el-input
              v-model="FIndexObject.FObjectType"
              ReadOnlyColor
              readonly
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table
      :data="FObjectFieldList"
      border
      style="height: 600px"
      highlight-current-row
      ref="myTable"
      :height="tableHeight"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="FFieldName" label="字段名称"> </el-table-column>
      <el-table-column prop="FFieldCaptoin" label="字段标签"> </el-table-column>
      <el-table-column prop="FFieldType" label="数据类型"> </el-table-column>
      <el-table-column prop="FFieldsize" label="数据长度"></el-table-column>
      <el-table-column prop="FFieldIsPrimarykey" label="主键"></el-table-column>
      <el-table-column
        prop="FFieldIsNullable"
        label="可为NULL"
      ></el-table-column>
      <el-table-column
        prop="FFieldPrecision"
        label="数据精度"
      ></el-table-column>
      <el-table-column
        prop="FFieldDefaultValue"
        label="默认值"
      ></el-table-column>
      <el-table-column prop="FFieldRemark" label="备注"></el-table-column>
      <el-table-column prop="FStatus" label="状态"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="onEditField(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="表编辑" v-model="FShowEdit" destroy-on-close>
      <TFormDataBaseFieldEdit
        :zContextParams="FIndexField"
        :zContextOnCall="onEditCallBack"
      >
      </TFormDataBaseFieldEdit>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import TFormBase from "@/views/BaseForm";
import TDataBaseApi, {
  TDataBaseObject,
  TDataBaseField,
} from "@/baselib/module/database/DataBaseApi";
import TFormDataBaseFieldEdit from "@/views/moduleSet/dataBase/DataBaseFieldEdit.vue";
import { Options } from "vue-class-component";
@Options({
  name: "TFormCmsMenu",
  components: {
    TFormDataBaseFieldEdit,
  },
})
export default class TFormDataBaseFieldList extends TFormBase {
  declare $refs: {
    myTable: any;
  };
  private tableHeight: number = 200;
  private FShowEdit: boolean = false;
  //
  private FIndexObject: TDataBaseObject = new TDataBaseObject();
  private FIndexField: TDataBaseField = new TDataBaseField();
  private FObjectFieldList: TDataBaseField[] = [];
  public created() {
    let lTemp = this.zIndexTag?.menuParams.DBObject;
    if (typeof lTemp == "object") {
      this.FIndexObject = lTemp as TDataBaseObject;
    }
    if (this.$myStrHelper.stringIsEmptyYW(this.FIndexObject.FObjectID)) {
      this.$myMsgHelp.msgDialog("数据库码ID不可为空");
      return;
    }
    this.openData();
  }
  private async openData() {
    let lResult = await TDataBaseApi.GetDBFieldList(
      this.FIndexObject.FObjectID
    );
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FObjectFieldList = lResult.resultData;
    this.$myMsgHelp.msgHintAutoClose("打开数据成功");
  }

  public mounted() {
    //自适应列表高
    this.$nextTick(() => {
      let lHeight = window.innerHeight - this.$refs.myTable.$el.offsetTop - 120;
      this.tableHeight = lHeight;
    });
    window.addEventListener("resize", () => {
      this.$nextTick(() => {
        let lHeight =
          window.innerHeight - this.$refs.myTable.$el.offsetTop - 120;
        this.tableHeight = lHeight;
      });
    });
  }

  private onEditField(qRow: TDataBaseField) {
    this.FIndexField = qRow;
    this.FShowEdit = true;
  }

  private onEditCallBack() {
    this.FShowEdit = false;
  }
}
</script>